<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar :isShowTransparentTitle="false" navbarType='5'>
			<view class="ml10" slot="left">
				我的
			</view>
		</wlk-navbar>
		<view class="user-content relative">
			<view class="user-card relative">
				<view class="user-info wlkflex" @click="loginPopupShow">
					<view class="avatar-box wlkflex">
						<u-avatar :src="userInfo.avatar" size="62"></u-avatar>
					</view>
					<view class="user-nickname ml20">{{userInfo.nickname||'去登录'}}</view>
				</view>
			</view>
			<view class="nav">
				<view class="order-card wlkflex justify-between br08 shadow">
					<view class="grid" @click="toOrder('0')">
						<view class="wlkflex justify-center ">
							<u--image :showLoading="true" src="/static/images/user/payment.png" width="25"
								height="25"></u--image>

						</view>
						<view class="mt20 center">待付款</view>
					</view>
					<view class="grid" @click="toOrder('1')">
						<view class="wlkflex justify-center ">
							<u--image :showLoading="true" src="/static/images/user/consumption.png" width="25"
								height="25"></u--image>

						</view>
						<view class="mt20 center">已支付</view>
					</view>
					<view class="grid relative" @click="toOrder('3')">
						<view class="wlkflex justify-center ">
							<u--image :showLoading="true" src="/static/images/user/refund.png" width="25"
								height="25"></u--image>

						</view>
						<view class="mt20 center">已完成</view>
					</view>
					<view class="grid over relative" @click="toOrder('refund')">
						<view class="wlkflex justify-center ">
							<u--image :showLoading="true" src="/static/images/user/evaluate.png" width="25"
								height="25"></u--image>
						</view>
						<view class="mt20 center">退款</view>
						<view class="triangle triangle_border"></view>
						<view class="triangle triangle_bg"></view>
					</view>
					<view class="order-all grid" @click="toOrder('all')">
						<view class="wlkflex justify-center ">
							<uni-icons type="bars" size="30" :color="themeColor"></uni-icons>
						</view>
						<view class="mt10 center">全部订单</view>
					</view>
				</view>
				<view class="tools-card br08 shadow">
					<u-cell-group :border="false" v-for="(item , index) in moduleBox" :key="index">
						<u-cell v-if="item.name=='退出登录'" :border="false" isLink @click="outModel = true" :item="item">
							<uni-icons slot="icon" :type="item.type" size="25"></uni-icons>
							<text class="title" slot="title" :item="item">{{item.name}}</text>
						</u-cell>
						<u-cell v-else :border="false" isLink @click="$Router.push(item.url)" :item="item">
							<uni-icons slot="icon" :type="item.type" size="25"></uni-icons>
							<text class="title" slot="title" :item="item">{{item.name}}</text>
						</u-cell>
					</u-cell-group>
				</view>
			</view>
		</view>
		<u-modal :show="outModel" :showCancelButton="true" @cancel='outModel =false' @close='outModel =false'
			:closeOnClickOverlay="true" @confirm="logoutFun" :confirmColor="themeColor" content="确定退出登录？"></u-modal>
		<wlk-tabbar></wlk-tabbar>
	</view>


</template>
<script>
	var _self;
	import share from "@/wlkutils/share";
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['userInfo', 'themeColor', 'isLogin'])
		},
		data() {
			return {
				outModel: false,
				moduleBox: [],
				style: {
					marginTop: ''
				},
			};
		},
		onLoad() {
			uni.hideTabBar();
			_self = this;
		},
		onShow() {
			this.isLogin ? this.getUserInfo() : '';
			this.getData();
		},
		onShareAppMessage(res) {
			return share.setShareInfo();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.isLogin ? this.getUserInfo() : '';
		},
		created() {
			this.style.marginTop = uni.$u.addUnit(uni.getSystemInfoSync().statusBarHeight + 44, 'px');
		},
		methods: {
			...mapActions(['getUserInfo', 'logout']),
			...mapMutations(['setLoginPopupShow']),
			toOrder(st) {
				this.$store.commit('setOrderStatus', st);
				this.$Router.pushTab('/pages/index/order')
			},
			loginPopupShow() {
				if (!this.isLogin) {
					this.setLoginPopupShow(true)
				}
			},
			logoutFun() {
				this.outModel = false;
				this.logout();
			},
			async getData() {
				uni.$u.http.get('module/getDetail').then(res => {
					_self.moduleBox = res.data.module
				}).catch(res => {
					
				})
			}
		}
	}
</script>
<style lang="scss">
	page {

		/*background-color: #FFFFFF!important;*/
		.user-card {
			/* #ifdef H5 */
			padding: 150rpx 30rpx 200rpx 30rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding: 100rpx 30rpx 220rpx 30rpx;
			/* #endif */
			background-image: repeating-linear-gradient(328deg, hsla(196, 0%, 79%, 0.06) 0px, hsla(196, 0%, 79%, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(238deg, hsla(196, 0%, 79%, 0.06) 0px, hsla(196, 0%, 79%, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(238deg, hsla(196, 0%, 79%, 0.09) 0px, hsla(196, 0%, 79%, 0.09) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(328deg, hsla(196, 0%, 79%, 0.09) 0px, hsla(196, 0%, 79%, 0.09) 1px, transparent 1px, transparent 12px), linear-gradient(328deg, rgb(255, 255, 255), rgb(255, 255, 255));
			font-size: 38rpx;
			font-weight: bold;
			border-radius: 0 0 30% 30%;

			.user-nickname {
				color: $uni-text-color;
			}
		}

		.nav {
			position: absolute;
			/* #ifdef H5 */
			top: 330rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			top: 300rpx;
			/* #endif */
			width: 92%;
			left: 4%;
			padding-bottom: 120rpx;

			.order-card {
				background-color: #FFFFFF;
				font-size: $font-base;
				padding: 20rpx 0;

				.grid {
					padding: 20rpx 0;
					width: 20%;
				}

				.over {
					.triangle {
						position: absolute;
						top: 60rpx;
						z-index: 998;
						overflow: hidden;
						width: 0;
						height: 0;
						border-width: 5px;
						border-style: dashed solid dashed dashed;

					}

					.triangle_bg {
						right: -19rpx;
						z-index: 999;
						border-color: transparent transparent transparent #f3f3f3;

					}

					.triangle_border {
						right: -20rpx;
						border-color: transparent transparent transparent #f3f3f3;
					}
				}

				.order-all {
					box-shadow: -5px 0 4px -2px rgba(0, 0, 0, 0.05);
				}
			}

			.tools-card {
				background-color: #FFFFFF;
				font-size: $font-base;
				padding: 30rpx 0;
				margin-top: 40rpx;

				.u-cell {
					padding: 10rpx 0;
				}

				.title {
					font-size: $font-base;
					margin-left: 10rpx;
				}
			}
		}

	}
</style>